<template>
	<view class="pageview">
		<cl-navbar autoBack bgColor="transparent" :isbgColor="false" @rightClick="godetails" rightIcon='/static/icon/gengduo.svg'></cl-navbar>
		<view class="pageContent">
			<cl-avatar
				:src="this.friendInfo.avatar_url"
				size="750rpx" shape='straight'></cl-avatar>
			<view class="centerTop">
				<view class="centerTop__topview">
					<cl-avatar
						:src="friendInfo.avatar_url" preview
						size="140rpx"></cl-avatar>
					<view class="centerTop__topview__info">
						<view style="display: flex;align-items: center;">
							<image src="/static/icon/nan.svg" style="width: 35rpx;height: 35rpx;margin-right: 10rpx;" v-if="friendInfo.sex == '男'"/>
							<image src="/static/icon/nv.svg" style="width: 35rpx;height: 35rpx;margin-right: 10rpx;" v-else-if="friendInfo.sex == '女'"/>
							<text class="centerTop__topview__info__nickname u-line-1" style="max-width: 300rpx;">{{friendInfo.friend_remark || friendInfo.nick_name}}</text>
							<text v-if="friendInfo.user_type && friendInfo.user_type > 0 && friendInfo.user_type != 6 && friendInfo.user_type != 8" class="typetag" style="background-color: #02D478;">{{$t('common.friend.authority')}}</text>
						</view>
						<view style="display: flex;align-items: center;margin-top: 10rpx;" @click.stop="copy">
							<text class="centerTop__topview__info__account">{{$t('my.index.account')}}：{{friendInfo.user_no}}</text>
							<u-icon name="file-text" size="15px"></u-icon>
						</view>
					</view>
				</view>
				<view class="centerTop__signature u-line-3">
					{{$t("addressbook.friend_details.signature")}}：<span>{{friendInfo.sign_remark || $t("my.index.noSignature")}}</span> 
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview" v-if="friendInfo.friend_remark">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("addressbook.friend_details.nickname")}}</text>
					</view>
					<view class="cellview__right" >
						<text class="cellview__right__content u-line-1">{{friendInfo.nick_name}}</text>
					</view>
				</view>
				<view class="cellview" v-if="groupNickname">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("addressbook.friend_details.groupnickname")}}</text>
					</view>
					<view class="cellview__right" >
						<text class="cellview__right__content u-line-1">{{groupNickname}}</text>
					</view>
				</view>
				<view class="cellview" @click="setBeizhu">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("addressbook.friend_details.remark")}}</text>
					</view>
					<view class="cellview__right" >
						<text class="cellview__right__content u-line-1">{{friendInfo.friend_remark}}</text>
						<u-icon name="arrow-right" color="#B2B2B2"></u-icon>
					</view>
				</view>
			</view>
			<view class="tostspan" v-if="friendInfo.is_black">
				{{$t("addressbook.friend_details.maskLang")}}
			</view>
			<view class="bottombtn" @click="goMsgpage">
				{{$t('friendDetails.sendMessage')}}
			</view>
		</view>
		<view>
			<cl-edit-pop ref="clEditPop" :title="$t('addressbook.friend_edit_details.setRemarks')" @complete="complete">
				<view style="padding:30rpx;">
					<u-input
						:customStyle="{backgroundColor:'#ffffff',height:'110rpx',padding:'0 30rpx',borderRadius: '20rpx'}"
						fontSize="28rpx"
						:adjustPosition="false"
						v-model="setData.friend_nickname"
					    border="none"
						focus
					  ></u-input>
				</view>
			</cl-edit-pop>
		</view>
	</view>
</template>

<script>
	
	import friendsBlackSqlite from '@/sqlite_services/friendsBlack.js'
	import sqliteFriend from '@/sqlite_services/friend.js'
	import friendsApi from "@/services/api/friends.js"
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'friendDetails',
		data() {
			return {
				groupNickname:'',
				setData:{
					friend_id:0,
					friend_nickname:''
				},
				skipAgain:false,
				cacheCata:null,
			}
		},
		computed: {
			...mapState({
				friendInfo: state => state.friends.friendInfo
			}),
		},
		onLoad() {
			let { friend_idx,friend_remark,nick_name,avatar_url,skipAgain,groupNickname } = this.$Route.query
			if(groupNickname){
				this.groupNickname = groupNickname
			}
			this.$store.commit('setFriendInfo',{
				user_id:friend_idx,
				nick_name,
				friend_remark,
				avatar_url
			})
			
			if(skipAgain){
				this.skipAgain = skipAgain
			}
			this.getInfo()
		},
		watch: {
			friendInfo: {
			    handler(newVal, oldVal) {
					uni.$emit('onFriendInfo',newVal)
			    },
			    deep: true
			}
		},
		onShow() {
			if(!this.friendInfo.user_id && this.cacheCata){
				this.$store.commit('setFriendInfo',{
					...this.cacheCata
				})
				this.cacheCata = null
			}
			uni.$off('onFriendInfo',this.onFriendInfo)
		},
		onHide() {
			this.cacheCata = JSON.parse(JSON.stringify(this.friendInfo))
			uni.$on('onFriendInfo',this.onFriendInfo)
		},
		onUnload() {
			this.$store.commit('setFriendInfo',{})
			uni.$off('onFriendInfo',this.onFriendInfo)
		},
		methods: {
			onFriendInfo(data){
				if(data.user_id == (this.cacheCata && this.cacheCata.user_id)){
					this.cacheCata = JSON.parse(JSON.stringify(data))
				}
			},
			copy(){
				uni.setClipboardData({
					data: this.friendInfo.user_no,
					showToast:false,
					success: () => {
						uni.showToast({
							icon:'none',
							title:this.$t("tost.title.copyOk")
						})
					}
				});
			},
			//设置备注
			setBeizhu(){
				let {friend_remark,user_id,nick_name} = this.friendInfo
				this.setData = {
					friend_nickname:friend_remark,
					friend_id:user_id,
					nickname:nick_name
				}
				this.$refs.clEditPop.show()
			},
			//设置备注
			async complete(){
				try{
					let resapi = await friendsApi.editNickname(this.setData)
					if(resapi){
						this.$store.commit('updateFriendInfo',{
							friend_remark:this.setData.friend_nickname,
							user_id:this.setData.friend_id,
						})
						this.$refs.clEditPop.cancel()
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			async getInfo(){
				try{
					let res = await sqliteFriend.getUserInfo(this.friendInfo.user_id)
					if(res) this.$store.commit('updateFriendInfo',res)
				}catch(e){
					console.log(e);
				}
				//查黑名单
				try{
					let res = await friendsBlackSqlite.getBlackInfo(this.friendInfo.user_id)
					if (res) {
						this.$store.commit('updateFriendInfo',{
							is_black:true,
							user_id:this.setData.friend_id,
						})
					}else{
						this.$store.commit('updateFriendInfo',{
							is_black:false,
							user_id:this.setData.friend_id,
						})
					}
				}catch(e){
					console.log(e);
				}
				try{
					let res = await friendsApi.getFriendInfo(this.friendInfo.user_id)
					if(res)this.$store.commit('updateFriendInfo',res)
				}catch(e){
					console.log(e);
				}
				console.log(this.friendInfo);
			},
			godetails(){
				this.$Router.push({
					name: 'friend_edit_details'
				});
			},
			goMsgpage(){
				
				let pages = getCurrentPages();
				let cvRoute = 'pagesA/chat/msg'
				let cvRoute2 = 'pagesA/chat/group_msg'
				let delta = 0;
				let found = false;
				for (let i = pages.length - 1; i >= 0; i--) {
				    if (pages[i].route === cvRoute || pages[i].route === cvRoute2) {
				        found = true;
				        break;
				    } else {
				        delta++;
				    }
				}
				let data = JSON.parse(JSON.stringify(this.friendInfo))
				if (found) {
					uni.navigateBack({
					    delta: delta,
					    complete: () => {
							console.log(this.skipAgain);
							if(this.skipAgain){
								setTimeout(()=>{
									this.$Router.replace({
										name: 'chatMsg',
										params: {
											friend_idx:data.user_id,
											nick_name:data.friend_remark || data.nick_name,
											avatar_url:data.avatar_url,
											user_type:data.user_type
										}
									});
								},0)
							}
					    },
					})
				} else {
				    this.$Router.push({
				    	name: 'chatMsg',
				    	params: {
				    		friend_idx:data.user_id,
				    		nick_name:data.friend_remark || data.nick_name,
				    		avatar_url:data.avatar_url,
							user_type:data.user_type
				    	}
				    });
				}
			}
		},
	};
</script>

<style scoped lang="scss">
	.typetag{
		white-space: nowrap;
		font-size: 20rpx;
		color: #FFFFFF;
		padding: 0 10rpx;
		height: 28rpx;
		margin-left: 10rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #FF7676;
	}
	.bottombtn{
		position: fixed;
		width: 342rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		background: linear-gradient( 270deg, #FF7B3C 0%, #FF5B7C 100%);
		border-radius: 40rpx;
		left: 204rpx;
		bottom: 100rpx;
	}
	.tostspan{
		text-align: center;
		font-size: 28rpx;
		color: #61626E;
		margin-top: 40rpx;
	}
	.centerTop {
		padding:  1rpx 30rpx;
		position: relative;
		box-sizing: border-box;
		margin-top: -35rpx;
		border-radius: 30rpx;
		background-color: #ededed;
		&__topview {
			display: flex;
			align-items: center;
			margin-top: -35rpx;
			&__info {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				margin-top: 35rpx;
				&__nickname {
					font-size: 32rpx;
				}

				&__account {
					font-size: 24rpx;
					color: #61626E;
				}
			}
		}

		&__signature {
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #61626E;
		}

		&__positionview {
			position: absolute;
			right: 40rpx;
			top: 70rpx;
			z-index: -1;

			&__img {
				width: 320rpx;
				height: 320rpx;
			}
		}
	}
	.cellviewGrop {
		background: #ffffff;
		border-radius: 20rpx;
		margin: 40rpx 30rpx 0;
	
		.cellview {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 110rpx;
	
			&__left {
				display: flex;
				align-items: center;
	
	
				&__title {
					font-size: 28rpx;
					white-space: nowrap;
				}
			}
			&__right{
				display: flex;
				align-items: center;
				margin-left: 50rpx;
				&__content{
					font-size: 28rpx;
					color: #61626e;
				}
			}
		}
	}
</style>